<template>
	<view>
		<view class="header_bg">
			<view class="header_bgimg">
				<view class="header_title"></view>
				<view class="header_text">
					数据来源：WHO和霍普金斯大学网站
				</view>
			</view>
		</view>
		<view class="time" style="font-weight: 600;color:#222222;margin-left: 60rpx;">统计截至：{{nowTime}}</view>
		<view class="content">
			<view class="header">
				<u-row gutter="12">
							<u-col span="3">
								<view class="demo-layout localConfirm">
									<view class="localConfirm_text">
										<view class="add">相比<text class="computeList">{{this.nowConfirmAdd>=0?"+":''}}{{this.nowConfirmAdd}}</text></view>
										<view class="number">{{this.nowConfirm}}</view>
										<view class="text">现有确诊</view>
									</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout nowConfirm">
									<view class="nowConfirm_text">
										<view class="add">相比<text class="computeList">{{this.confirmAdd>=0?"+":''}}{{this.confirmAdd}}</text></view>
										<view class="number">{{this.confirm}}</view>
										<view class="text">累计确诊</view>
									</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout confirm">
									<view class="confirm_text">
										<view class="add">相比<text class="computeList">{{this.healAdd>=0?"+":''}}{{this.healAdd}}</text></view>
										<view class="number">{{this.heal}}</view>
										<view class="text">累计治愈</view>
									</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout dead">
									<view class="dead_text">
										<view class="add">相比<text class="computeList">{{this.deadAdd>=0?"+":''}}{{this.deadAdd}}</text></view>
										<view class="number">{{this.dead}}</view>
										<view class="text">累计死亡</view>
									</view>
								</view>
							</u-col>
				</u-row>
						
			</view>
		
			<!-- 全球疫苗跟踪 -->
			
			<view class="ymTop">
				<view class="ymTop_header">
					<view class="ymTitle">全球新冠疫苗接种跟踪</view>
					<view class="ymDetail" @click="handleToVaccine">查看详情<u-icon name="arrow-right" color="#7c7c7c"></u-icon></view>
				</view>
				<view class="ymContent">
					<view class="ymContentBox">
						<view>累计接种</view>
						<view class="ymTotal">
							<view class="ymNum">{{this.ymTotal|Totalfilter}}</view>
							<view class="ymText">亿剂</view>
						</view>
					</view>
					
					<view class="ymContentBox2">
						<view>较上日新增</view>
						<view class="ymAdd">
							<view class="ymNum">{{this.ymAdd|Addfilter}}</view>
							<view class="ymText">万剂</view>
						</view>
					</view>
					
					<view class="ymContentBox3">
						<view>每百人接种</view>
						<view class="ymRate">
							<view class="ymNum">{{this.ymHundred}}</view>
							<view class="ymText">剂</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 新增图表 -->
		<view v-if="showEAdd">
			<view class="eheader">印度新增确诊</view>
			<view class="echart_card" style="height: 500rpx;">
				<view class="echart_img">
					<echarts :option="optionAdd" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		
		<!-- 现有图表 -->
		<view v-else="showENow">
			<view class="eheader">印度累计确诊</view>
			<view class="echart_card" style="height: 500rpx;">
				<view class="echart_img">
					<echarts :option="option" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		
		<view class="eButton">
			<view class="addLocal"><u-button :plain="true" @click="showAdd" :type="colorA">印度新增确诊</u-button></view>
			<view class="nowLocal"><u-button :plain="true" @click="showNow" :type="colorN">印度累计确诊</u-button></view>	
		</view>
	
		<!-- 海外多国 -->
		<!-- 新增图表 -->
		<view class="haiwai" style="font-weight: 600;font-size:28rpx;margin:20rpx 0 20rpx 60rpx;">海外多国累计趋势</view>
		<view >
			
			<view class="echart_card" style="height: 500rpx;">
				<view class="echart_img">
					<echarts :option="optionMerge" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		
		<!-- 中国疫情 -->
		<view class="China">
			<view class="search_box" style="margin:0 0 10rpx 36rpx;">
				<u-search placeholder="请输入国家名称" :show-action="false" shape="round" :clearabled="true" @change="searchCity()" v-model="search"></u-search>
			</view>
			<view>
				<view class="ChinaTitle">世界疫情</view>
				<view class="tips">7:00-10:00为更新高峰，数据如有滞后请谅解。</view>
			</view>
			<view class="table">
				<u-row gutter="15" >
							<u-col span="3" style="flex:0">
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;font-weight: 700;color:#22222;">地区</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;font-weight: 700;color:#005dff;">新增确诊</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;font-weight: 700;color:#f55253;">累计确诊</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;font-weight: 700;color:#178b50;">治愈</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;font-weight: 700;color:#4e5a65;">死亡</view>
							</u-col>
				</u-row>
				
				<u-row gutter="15" v-for="(item,index) in foreignList" :key="index" v-if="!search" >
							<u-col span="4" style="flex:0" >
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;">{{item.areaName}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;font-size: 24rpx;"  >{{item.yesterday_inc_info.confirmed_inc}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;font-size: 24rpx;" >{{item.confirmedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;font-size: 24rpx;" >{{item.curedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;font-size: 24rpx;" >{{item.deadNum}}</view>
							</u-col>
						</u-row>
						
						<u-row gutter="15"  v-if="search" v-for="item in this.foreignSearch" :key="item.areaName" >
						
									<u-col span="4" style="flex:0" >
										<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.areaName.slice(0,5)}}</view>
									</u-col>
									<u-col span="3" style="flex:0">
										<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.yesterday_inc_info.confirmed_inc}}</view>
									</u-col>
									<u-col span="3" style="flex:0">
										<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.confirmedNum}}</view>
									</u-col>
									<u-col span="3" style="flex:0">
										<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.curedNum}}</view>
									</u-col>
									<u-col span="3" style="flex:0">
										<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.deadNum}}</view>
									</u-col>
							
						</u-row>
					
			</view>
			<view class="none">
				<u-divider>没有更多了</u-divider>
			</view>
		</view>
		
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:'',
				foreignSearch:[],
				scrollTop: 0,
				foreignList:[],
				nowTime:0,
				nowConfirm:0,
				confirm:0,
				heal:0,
				dead:0,
				nowConfirmAdd:0,
				confirmAdd:0,
				healAdd:0,
				deadAdd:0,
				// 疫苗
				ymTotal:0,
				ymAdd:0,
				ymHundred:0,
				// 印度图表
				// 印度新增确诊图表显示
				showEAdd:true,
				showENow:false,
				colorA:"primary",
				colorN:"",
				option : {	
					tooltip: {
					    trigger: 'axis'
					},
					
					grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					},
					
					xAxis: {
					    type: 'category',
					    boundaryGap: false,
					    data: []
					},
					yAxis: {
					    type: 'value',
						axisLabel:{
										formatter:'{value}(千万)',
										textStyle:{
											fontSize:8,
											color:'#000'
									}
									},
						axisLine: {
									lineStyle:{
									
										width:1,//轴线的宽度
										fontSize:2,
									}
								 },
					},
					series: [
					    {
					        name: '印度累计确诊',
					        type: 'line',
					        itemStyle: {
					                 normal: {
					                   color: "#FE7B7C",//折线点的颜色
					                   lineStyle: {
					                   color: "#FE7B7C"//折线的颜色
					                  }
					                }
					          },			
					        data: []
					    },
					    
					]
				},
				// 印度现有图表显示
				optionAdd:{
					xAxis: {
					    type: 'category',
					    data: [],
						axisLine: {
									lineStyle:{
										color:'#ACACAC',//x轴的颜色
										width:1,//轴线的宽度
										fontSize:2,
									}
								 },
							axisLabel: {
							interval:0,
							rotate:40,
							textStyle:{
							fontSize:8
							}
						}
					},
					yAxis: {
					       type: 'value',
						   axisLabel:{
						   				formatter:'{value}(万)',
						   				textStyle:{
						   					fontSize:8,
						   					color:'#000'
						   			}
						   			},
						   axisLine: {
						   			lineStyle:{
						   			
						   				width:1,//轴线的宽度
						   				fontSize:2,
						   			}
						   		 },
					   },
					series: [{
						name: '印度新增确诊',
					    data: [],
					    type: 'line',
						itemStyle: {
						         normal: {
						           color: "#be2121",//折线点的颜色
						           lineStyle: {
						           color: "#be2121"//折线的颜色
						          }
						        }
						  },					
					}]
				},
				optionMerge : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['俄罗斯','巴西','德国','意大利','法国','美国','英国','意大利']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
						axisLine: {
									lineStyle:{
										color:'#ACACAC',//x轴的颜色
										width:1,//轴线的宽度
										fontSize:2,
									}
								 },
							axisLabel: {
							interval:0,
							rotate:40,
							textStyle:{
							fontSize:8
							}
						},
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '俄罗斯',
				            type: 'line',
				       
				            data: []
				        },
				        {
				            name: '巴西',
				            type: 'line',
				           
				            data: []
				        },
				        {
				            name: '德国',
				            type: 'line',
				        
				            data: []
				        },
				        {
				            name: '意大利',
				            type: 'line',
				           
				            data: []
				        },
				        {
				            name: '法国',
				            type: 'line',
				            
				            data: []
				        },
						{
						    name: '美国',
						    type: 'line',
						    
						    data: []
						},
						{
						    name: '英国',
						    type: 'line',
						    
						    data: []
						},
						{
						    name: '西班牙',
						    type: 'line',
						    
						    data: []
						}
				    ]
				}
			}
		},
		filters:{
			Totalfilter(data){
				data = data + '';
				data=(data/100000000).toFixed(1);
				return data;
						},
			Addfilter(data){
				data = data + '';
				data=(data/10000).toFixed(2);
				return data;
			}
		},
		onLoad() {
			this.getDate();
			this.getList();
			this.getVacinne();
			this.getYD();
			this.getMerge();
			this.getForeign();
		},
		methods:{
			
			searchCity(){
				this.foreignSearch=[];
				for(var i=0;i<this.foreignList.length;i++){
					if(this.foreignList[i].areaName.search(this.search)>=0){
						this.foreignSearch.push(this.foreignList[i]);
					}
					
				}
			},
			handleToVaccine(){
				uni.switchTab({
					url:'../vaccine/vaccine'
				})
			},
			getForeign(){
				uni.request({
					url:'https://route.showapi.com/2217-5?showapi_appid=623853&showapi_sign=773c86931743478cb8dd6bdfd0458350'
				}).then(res=>{
					this.foreignList=res[1].data.showapi_res_body.foreignList;		
				})
			},
			// 海外多国图表
			getMerge(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoCountryMerge'
				}).then(res=>{
					
					for(var i=res[1].data.data.FAutoCountryMerge.俄罗斯.list.length;i>0;i-=40)
					{
						this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.俄罗斯.list[i-1].date);
						this.optionMerge.series[0].data.unshift(res[1].data.data.FAutoCountryMerge.俄罗斯.list[i-1].confirm);
						
					}
					for(var i=res[1].data.data.FAutoCountryMerge.巴西.list.length;i>0;i-=30)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.巴西.list[i-1].date);
						this.optionMerge.series[1].data.unshift(res[1].data.data.FAutoCountryMerge.巴西.list[i-1].confirm);
					}
					for(var i=res[1].data.data.FAutoCountryMerge.德国.list.length;i>0;i-=40)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.德国.list[i-1].date);
						this.optionMerge.series[2].data.unshift(res[1].data.data.FAutoCountryMerge.德国.list[i-1].confirm);
					}
					for(var i=res[1].data.data.FAutoCountryMerge.意大利.list.length;i>0;i-=40)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.意大利.list[i-1].date);
						this.optionMerge.series[3].data.unshift(res[1].data.data.FAutoCountryMerge.意大利.list[i-1].confirm);
					}
					for(var i=res[1].data.data.FAutoCountryMerge.法国.list.length;i>0;i-=40)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.法国.list[i-1].date);
						this.optionMerge.series[4].data.unshift(res[1].data.data.FAutoCountryMerge.法国.list[i-1].confirm);
					}
					for(var i=res[1].data.data.FAutoCountryMerge.英国.list.length;i>0;i-=40)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.英国.list[i-1].date);
						this.optionMerge.series[5].data.unshift(res[1].data.data.FAutoCountryMerge.英国.list[i-1].confirm);
					}
					for(var i=res[1].data.data.FAutoCountryMerge.西班牙.list.length;i>0;i-=40)
					{
						// this.optionMerge.xAxis.data.unshift(res[1].data.data.FAutoCountryMerge.西班牙.list[i-1].date);
						this.optionMerge.series[6].data.unshift(res[1].data.data.FAutoCountryMerge.西班牙.list[i-1].confirm);
					}
					
					
				
				})
			},
			// 控制图表
			showAdd(){
				this.showENow=false;
				this.showEAdd=true;
				this.colorA = "primary";
				this.colorN="";
			},
			showNow(){
				this.showENow=true;
				this.showEAdd=false;
				this.colorN="primary"
				this.colorA = ""
			},
			// 印度
			getYD(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/country/daily/list?countrys=%E5%8D%B0%E5%BA%A6'
				}).then(res=>{
					
					for(var i=0;i<res[1].data.data.印度.length;i+=5){
						this.option.xAxis.data.push(res[1].data.data.印度[i].date);
						this.option.series[0].data.push(res[1].data.data.印度[i].confirm/10000000);
						this.optionAdd.xAxis.data.push(res[1].data.data.印度[i].date);
						this.optionAdd.series[0].data.push(res[1].data.data.印度[i].confirm_add/10000);
					}
					
				})
			},	
			// 疫苗跟踪
			getVacinne(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTopData'
				}).then(res=>{
					this.ymTotal=res[1].data.data.VaccineTopData.全球.total_vaccinations;
					this.ymAdd=res[1].data.data.VaccineTopData.全球.new_vaccinations;
					this.ymHundred=res[1].data.data.VaccineTopData.全球.total_vaccinations_per_hundred;
				})
			},
			getList(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd'			
				}).then(res=>{
					this.nowConfirm=res[1].data.data.FAutoGlobalStatis.nowConfirm;
					this.confirm=res[1].data.data.FAutoGlobalStatis.confirm;
					this.heal=res[1].data.data.FAutoGlobalStatis.heal;
					this.dead=res[1].data.data.FAutoGlobalStatis.dead;
					this.nowConfirmAdd=res[1].data.data.FAutoGlobalStatis.nowConfirmAdd;
					this.confirmAdd=res[1].data.data.FAutoGlobalStatis.confirmAdd;
					this.healAdd=res[1].data.data.FAutoGlobalStatis.healAdd;
					this.deadAdd=res[1].data.data.FAutoGlobalStatis.deadAdd;
					
					
				})
			},
			getDate(type) {
				// 获取当前系统时间
				let date = new Date();
				
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
							
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				hours = hours > 9 ? hours : '0' + hours;
				minutes = minutes >9  ? minutes : '0' + minutes;
				this.nowTime=`${year}-${month}-${day} ${hours}:${minutes}`
				// return `${year}-${month}-${day}`;
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
		},
		}
	}
</script>

<style lang="scss" scoped>
	.none{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.u-search{
		width: 680rpx;
	}
	.China{
		
		margin-top: 30rpx;
		.ChinaTitle{
			margin-left: 60rpx;
			font-size: 32rpx;
			color:#222;
			font-weight: 700;
		}
		.tips{
			margin-left: 60rpx;
			color:#737373;
			font-size: 24rpx;
		}	
		.table{
			margin: auto auto;
			width:90%;
			margin-top: 30rpx;
		}
	}
	// 图表按钮
	.eButton{
		width: 90%;
		display: flex;
		justify-content: center;
		margin: auto auto;
		margin-top:15rpx ;
		.addLocal{
			height: 88rpx;
			width: 45%;
			font-size: 24rpx;
			margin-right: 10rpx;
			
		}
		.nowLocal{
			width:45%;
			font-size: 24rpx;
		}
	}
	.eheader{
		color: #222;
		font-weight: 700;
		font-size:28rpx;
		position: relative;
		padding-left: 60rpx;
		top: 88rpx;
	}
			
	.echart_card{
		border: 2rpx solid #efefef;
		border-radius: 1.6vw;
		height: 420rpx;
		width:90%;
		margin: auto auto;
		.echart_img{
			padding-bottom: 100rpx;
		}
		
	}
	// 疫苗跟踪
	.ymTop{
		margin-top: 18rpx;
		width: 670rpx;
		height: 198rpx;
		border:2rpx solid #efefef;
		.ymTop_header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0 20rpx 0;
			padding-left: 10rpx;
			padding-right:10rpx;
			.ymTitle{
				color: #222;
				font-weight: 500;
				font-size:28rpx
			}
			.ymDetail{
				color: #7c7c7c;
				font-size: 24rpx;
			}
			}
		.ymContent{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-top: 6rpx;
			.ymContentBox{
				width: 33.33%;
				border-right: 2rpx solid #ccc;
				.ymTotal{
					display: flex;
					justify-content: center;
					color:#178b50;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			.ymContentBox2{
				width: 33.33%;
				border-right: 2rpx solid #ccc;
				.ymAdd{
					display: flex;
					justify-content: center;
					color:#e57631;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			.ymContentBox3{
				width: 33.33%;
				.ymRate{
					display: flex;
					justify-content: center;
					color:#4e5a65;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			
		}
		
	}
	.dead_text{
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 20rpx;
			font-size: 20rpx;
			height: 32rpx;
			
			
			.computeList{
				height: 22rpx;
				font-size: 20rpx;
				color:#4e5a65;
				
			}
		}
		.number{
			color:#4e5a65;
			font-size:30rpx;
			padding-top: 20rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 确诊人数
	.confirm_text{
		
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 20rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				color:#178b50;
				
			}
		}
		.number{
			color:#178b50;
			font-size:30rpx;
			padding-top: 20rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 现有确诊
	.nowConfirm_text{
		
		text-align: center;
		.add{
			.computeList{
				font-size: 24rpx;
				color:#be2121;
				
			}
			color:#7c7c7c;
			padding-top: 20rpx;
			font-size: 24rpx;
			height: 32rpx;
			
		}
		.number{
			color:#be2121;
			font-size:30rpx;
			padding-top: 20rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 本土现有确诊
	.localConfirm_text{
		text-align: center;
		.add{
			.computeList{
				color:#e61c1d;
				
			}
			padding-top: 20rpx;
			font-size: 24rpx;
			color:#7c7c7c;
			height: 32rpx;
		}
		.number{
			color:#e61c1d;
			font-size:30rpx;
			padding-top: 20rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	.content{
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.u-row {
		display: flex;
		justify-content: space-between;
		margin: 0 4rpx 4rpx 0;
	}
	.demo-layout {
		width:164rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}
	
	.localConfirm {
		background: #fffaf7;
	}
	
	.nowConfirm {
		background: #e8effc;
	}
	
	.confirm {
		background: #fdeeee;
	}
	.nowSevere{
		background: #e9f7ec;
	}
	.import{
		background: #f1f5ff;
	}
	.dead{
		background: #f3f6f8;
	}
	// 头部
	.header_bg{
		width: 100%;
		height: 364rpx;
		.header_bgimg{
			background: url(https://mat1.gtimg.com/news/feiyanarea/head_bg_new.png) top;
			background-size: cover;
			width: 100%;
			height: 364rpx;
			position: relative;
			.header_title{
				position: absolute;
				background: url(../../static/head_title.png);
				background-size: 100% 100%;
				width: 380rpx;
				height: 124rpx;
				left: 25%;
				top: 25%;
			}
			.header_text{
				padding-top: 300rpx;
				padding-left: 25%;
				color:#fff;
				font-size:24rpx;
			}
		}
	}
.time{
		font-weight: 500;
		color: #222;
		height: 96rpx;
		line-height: 96rpx;
		margin: auto 0;
		
	}
</style>
